<template>
    <div id="tradeReason">
        <header-top :option="headerOption"></header-top>
        <div class="common-app-container bg-white">
            <div class="reason-top">
                <div class="text-xs reason-top-tip">
                    最多选三项
                </div>
                <div class="reason-top-sel">
                    <ul class="reason-list">
                        <li v-for="(item,index) in allReasons" :class="{active: item.isActive}" data="item.id" :key="index" @click="chooseReason(item)">
                            <div class="reason-icon"></div>
                            <div class="reason-content">{{item.text}}</div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="reason-bottom ">
                <div class="hbox text-center text-base color-9 bg-white">
                    <div v-if="myReasons.length == 0" class="col v-middle no-data">请选择买入原因</div>
                    <div v-else v-for="(item,index) in myReasons" class="col padder" data="item.icon" :key="index">
                        <i class="iconfont text-3x" :class="item.iconClass"></i>
                        <div class="reason-content">{{item.text}}</div>
                    </div>
                </div>
                <div style="width:100%;height:77px"></div>
                <div class="text-center res-btn-bottom">
                    <div class="comm-btn m-t-md m-b-md  bg-yellow text-base" id="reasonBtn" @click.stop.prevent="confirm">确认</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Constant from 'common/constant'
    import CommonUtil from 'common/common.util'
    import RemoteDAO from 'common/remoteDAO'
    import HeaderTop from 'components/HeaderTop'
    export default {
        data () {
            return {
                headerOption : {
                    title: this.$route.query.tradeType == 'build' ? '组合模拟买入' : '偷师',
                    leftBtn: Constant.leftBtn.BACK,
                    operations: []
                },
                allReasons: []
            }
        },
        components: {
            HeaderTop
        },
        computed: {
            myReasons () {
                var myReasons = [];
                if(this.allReasons.length > 0){
                    for(let i=0;i<this.allReasons.length;i++){
                        var reason = this.allReasons[i];
                        if(reason.isActive){
                            myReasons.push(reason);
                        }
                    }
                }
                return myReasons;
            }
        },
        created () {
            this.getAllReasons();
        },
        methods: {

            //调12008312接口获取所有原因
            getAllReasons () {
                var allReasons = [];
                RemoteDAO.callUC12008312(response => {
                    if(response.error == 0){
                        var decryptData = JSON.parse(decrypt.json2(response.data));
                        var reasons = decryptData.body;
                        for(let i=0;i<reasons.length;i++){
                            var newReason = {};
                            var reason = reasons[i];
                            if(reason.CONFIG_TYPE == "B"){
                                newReason['icon'] = reason.ICON_URL;
                                newReason['text'] = reason.TITLE;
                                newReason['isActive'] = false;
                                var myReasons = this.$store.state.myReasons;
                                for(let j=0;j<myReasons.length;j++){
                                    var myReason = myReasons[j];
                                    if(reason.ICON_URL == myReason.icon){
                                        newReason['isActive'] = true;
                                        break;
                                    }
                                }
                                newReason['iconClass'] = Constant.REASON_ICON[reason.ICON_URL];
                                allReasons.push(newReason);
                            }
                        }
                        this.allReasons = allReasons;
                    }else{
                        this.$store.dispatch('setTip',{text: '系统繁忙，请稍后重试'});
                    }
                })
            },

            //点击选择原因
            chooseReason (item) {
                if(item.isActive) {
                    item.isActive = false;
                }else{
                    if(this.myReasons.length < 3){
                        item.isActive = true;
                    }else{
                        this.$store.dispatch('setTip',{text:'最多只能选择三个原因!'});
                    }
                }
            },

            //点击确认
            confirm () {
                if(this.myReasons.length > 0){
                    this.$store.dispatch('setMyReasons',this.myReasons);
                    this.$router.go(-1);
                }else{
                    this.$store.dispatch('setTip',{text:'请选择原因！'});
                }
            }
        }
    }
</script>
